
<!--
     参照：
     http://gallery.echartsjs.com/editor.html?c=xH10kor7hf
-->
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html5 echarts地图分布动画特效</title>
	<style>
		html,body{margin:0;padding:0;}
	</style>
</head>

<body style="background:#1B1B1B">
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> 
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

<div id="main" style="width: 50%;height: 100%;">
</div>
<!--Step:2 Import echarts.js--> 
<!--Step:2 引入echarts.js-->

<!-- <script src="https://webapi.amap.com/maps?v=1.4.8&key=2a5072bcb1b308fb0a64020a0f868016&plugin=AMap.ControlBar"></script> -->
<script src="https://webapi.amap.com/maps?v=1.4.8&key=2a5072bcb1b308fb0a64020a0f868016&plugin=AMap.ControlBar,AMap.CustomLayer"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="../html/高德地图/echarts-amap.min.js" charset="UTF-8"></script>

<script type="text/javascript">

	$(function(){
		var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
    	 
        amap: {
             maxPitch: 60,
             pitch: 10, //45 俯仰角
             viewMode: '3D',
             zoom: 8,
             expandZoomRange: true,
             zooms: [3, 20],
             mapStyle: 'amap://styles/darkblue',
             center: [119.647265,29.079195],
             rotation: 0,
             resizeEnable: true,
        },
        animation: false,
        // tooltip : {
        //     trigger: 'item',
        //     formatter:function(params, ticket, callback){
        //         console.log(params);
        //         if(params.seriesType=="effectScatter") {
        //             return "线路："+params.data.name+""+params.data.value[2];
        //         }else if(params.seriesType=="lines"){
        //             return params.data.fromName+">"+params.data.toName+"<br />"+params.data.value;
        //         }else{
        //             return params.name;
        //         }
        //     }
        // },
        // brush: {
        //      toolbox: ['rect', 'polygon', 'clear'],
        //      ouyOfBrush: {
        //          color: '#ffff00'
        //      },
        //      brushStyle: {
        //          borderWidth: 2,
        //          color: 'rgba(0,0,0,0.2)',
        //          borderColor: 'rgba(0,0,0,0.5)',
        //      },
        //      seriesIndex: [0, 1],
        //      throttleType: 'debounce',
        //      throttleDelay: 300,
        //      geoIndex: 'all',
        // },
         series: []
    });

    var map = myChart.getModel().getComponent('amap').getAMap();
    var layer = myChart.getModel().getComponent('amap').getLayer();

    AMap.plugin(["AMap.ControlBar"], function() {
         var bar = new AMap.ControlBar();
         map.addControl(bar);
    })

    AMap.plugin(["AMap.ToolBar"], function() {
    	map.addControl(new AMap.ToolBar());
    });

    AMap.event.addListener(map,'zoomend',function(){
        console.log('当前缩放级别：' + map.getZoom());
        console.log('俯视视角' + map.getPitch());
        console.log('俯视视角' + map.getPitch());
    });

    var series =   [
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 3
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "arrow"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "金华to东阳",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#a6c84c"
                }
            },
            "data": [
                {
                    "name": "东阳",
                    "value": [120.24179,29.290158, 95]
                }
            ]
        },
        {
            "name": "金华to台州",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 3
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "上海",
                    "toName": "台州",
                    "coords": [
                        [119.647265,29.079195],
                        [121.42079,28.655716]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "金华to台州",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "arrow"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "台州",
                    "coords": [
                        [119.647265,29.079195],
                        [121.42079,28.655716]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "金华to台州",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#a6c84c"
                }
            },
            "data": [
                {
                    "name": "台州",
                    "value": [121.42079,28.655716,95]
                }
            ]
        },

        {
            "name": "台州to丽水",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 3
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "台州",
                    "toName": "丽水",
                    "coords": [
                        [121.42079,28.655716],
                        [119.923249,28.467694]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "台州to丽水",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "arrow"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "台州",
                    "toName": "丽水",
                    "coords": [
                        [121.42079,28.655716],
                        [119.923249,28.467694]
                    ],
                    "value": 95
                }
            ]
        },
        {
            "name": "台州to丽水",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#a6c84c"
                }
            },
            "data": [
                {
                    "name": "丽水",
                    "value": [119.923249,28.467694]
                }
            ]
        }
    ];

	myChart.setOption({
        series: series
    });

	layer.render = function() {
    	// let series = myChart.getOption().seriesIndexes;
    	// myChart.setOption({
    	//     series: []
    	// });
    	myChart.setOption({
    	    series: series
    	});

		console.log('当前缩放级别：' + map.getZoom());
	    console.log('俯视视角：' + map.getPitch());
	    console.log('顺时针：' + map.getRotation());
	}
});

</script>

</body>
</html>